<script setup>
import { useRoute, useRouter } from 'vue-router';
import VLoading from "@/components/VLoading.vue";

const route = useRoute();
const router = useRouter()
let loading = ref(true)
let videoData = reactive({
  img: null, // 视频封面
  videoIntroduce: null, // 视频介绍
  videoName: null, // 视频名字
  url: null, // 视频链接
  teacher: null, // 教师姓名
  teacher_introduce: null, // 教师介绍
  teacherShip: null, // 教师职位
  teacherEducation: null, // 教师学历
  teacher_img: null, // 教师图片
  subjectBgImg: null, // 专业背景图
  subjectTag: null, // 专业标签
});

onMounted(async () => {
  if (!route.query.videoData)
    return router.push('/VideoCourse')
  const newData = JSON.parse(route.query.videoData);
  Object.assign(videoData, newData);
  await nextTick();

  loading.value = false
});

</script>


<template>

  <template v-if="loading">
    <VLoading :isLoading=loading />
  </template>

  <template v-else>
    <div class="bg" :style="{ 'background-image': 'url(' + videoData.subjectBgImg + ')' }" />
    <v-container fluid class="d-flex flex-row">
      <v-row class="d-flex flex-row ">
        <v-col cols="9" class="w-10 h-10 d-flex justify-center align-center">
          <video controls autoplay>
            <source :src="videoData.url" type="video/mp4" style="width: 100%; height: 100%;">
          </video>
        </v-col>
        <v-col cols="3" class="w-10 h-10 d-flex justify-center align-center">
          <v-row class="d-flex flex-column mt-auto justify-center align-center" style=" height: 100%;">
            <v-col cols="6" class="mt-8 about d-flex flex-column">
              <div>视 频 介 绍</div>
              <div>
                {{ videoData.videoIntroduce }}
              </div>
              <pre>
            From: 广州南方学院文学与传媒学院
          </pre>
            </v-col>
            <v-col cols="4" class="mt-7 d-flex flex-column personal">
              <div class="psnlDetail d-flex flex-row align-center">
                <img :src='videoData.teacher_img'>
                <div class="d-flex flex-column">
                  <div>{{ videoData.teacher }}</div>
                  <div>{{ videoData.teacher_introduce }}</div>
                  <!-- <div>{{ videoData.teacherShip }}</div>
                <div>{{ videoData.teacherEducation }}</div> -->
                </div>
              </div>
              <div class="collect">
                这里可以放置收藏的功能
              </div>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
  </template>
</template>

<style lang="scss" scoped>
// 定义媒体查询参数
$breakpoints: (
  'phone':320px,
  'pad':481px,
  'notebook':769px,
  'desktop':1025px,
  'tv':1201px
);

// 定义媒体查询混合
@mixin respondTo($breakname) {
  $bp: map-get($breakpoints, $breakname);

  @media(min-width:$bp) {
    @content
  }
}

.v-container {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1;
}

.bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-position: center;
  background-size: cover;
  filter: blur(3px);
}

video {
  width: 98%;
  height: 88%;
  margin-top: 10vh;
  border-radius: 30px;
  // background-color: cadetblue;
  border: 1px solid #ccc;
  object-fit: fill;
}

.about {
  background-color: white;
  border: 1px solid #ccc;
  max-width: 95%;
  max-height: 50%;
  border-radius: 15px;
  position: relative;

  & div:nth-child(1) {
    font-size: 1.3em;

  }

  & div:nth-child(2) {
    font-size: 0.8em;
    text-indent: 2em;
    text-align: justify;

    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
  }

  & pre {
    color: rgb(70, 69, 69);
    position: absolute;
    bottom: -3%;
    right: 5%;
    font-size: 0.8em;
  }
}

.personal {
  background-color: white;
  border: 1px solid #ccc;
  max-width: 95%;
  max-height: 50%;
  border-radius: 15px;

  // & div:nth-child(1) {
  //   font-size: 1.3em;
  // }
}

.psnlDetail {
  width: 100%;
  margin-right: auto;
  margin-top: 3px;

  & img {
    width: 90px;
    height: 90px;
    border-radius: 100%;
  }

  & div {
    margin-left: 5px;


    & div:nth-child(1) {
      font-size: 1.1em;
      margin-bottom: 1px;
    }

    & div:nth-child(2) {
      font-size: 0.7em;
      color: rgb(70, 69, 69);
      width: 100%;
    }

    & div:nth-child(3) {
      font-size: 0.7em;
      color: rgb(70, 69, 69);
    }
  }
}



.collect {
  color: gray;
  font-size: 0.7em;
}
</style>